import { resolveAssetImage } from "@/utils/common"
import { formatCurrency } from "@/utils/format"
import styled from "@emotion/styled"
import { TransactionDetail } from "../types/transaction"
import { TransactionDetailRow } from "./TransactionDetailRow"

const Card = styled.div`
    background-color: white;
    margin: 0 auto;
    box-shadow: 0 0 4rem rgba(0, 0, 0, 0.05);
    width: 343rem;
    height: 352rem;
    border-radius: 10rem;
    margin-top: -90rem;
`

const Title = styled.h3`
    font-weight: 600;
    font-weight: 700;
    font-size: 16rem;
    height: 48rem;
    line-height: 48rem;
    letter-spacing: 0%;
    margin: 0;
    padding-left: 16rem;
    border-bottom: 1rem solid #d5d5d8;
    margin-bottom: 8rem;
`
const PayImg = styled.img`
    width: 20rem;
    height: 20rem;
`

export const TransactionDetailCard = ({ detail }: { detail: TransactionDetail }) => {
    return (
        <Card>
            <Title children={"Transaction Details"} />
            <TransactionDetailRow
                label="Type"
                value={detail.type}
            />
            <TransactionDetailRow
                label={"Payment Method"}
                value={
                    <>
                        <PayImg
                            src={resolveAssetImage("pages/TransactionStatusPage/gcash.webp")}
                            alt=""
                        />
                        &nbsp;
                        <span>{detail.method}</span>
                    </>
                }
            />
            <TransactionDetailRow
                label="Deposit Amount"
                value={formatCurrency(parseFloat(detail.deposit))}
            />
            <TransactionDetailRow
                label="Bonus Amount"
                value={formatCurrency(parseFloat(detail.bonus))}
            />
            <TransactionDetailRow
                label="Amount Received"
                value={formatCurrency(parseFloat(detail.received))}
            />
            <TransactionDetailRow
                label="Date & Time"
                value={detail.dateTime}
            />
            <TransactionDetailRow
                label="Transaction ID"
                value={detail.txid}
                copyable
            />
        </Card>
    )
}
